<template>
	<view>
		<view class="top1"><view class="top2">我的</view></view>
		<view style="height: 176upx;"></view>
		<view class="header">
			<view class="flex h-top">
				<view class="userinfo" @click="toLogin">
					<view class="face"><image :src="userInfo.avatar || imgSrcUrl + 'head.png'"></image></view>
					<view class="info" v-if="hasLogin">
						<!-- 是否登录 -->
						<view class="username">
							<!-- userInfo.memberRole==0 根据角色显示内容-->
							{{ userInfo.nickname || '未登录' }}
							<image
								class="vip-img mar-left-15"
								src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/vip.png"
							></image>
							<image
								class="rz-img mar-left-15"
								src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/rz.png"
							></image>
						</view>
						<!-- <view class="integral">15000858802</view> -->
					</view>
					<view class="info" v-else>
						<view class="username">未登录</view>
						<view class="integral">点击可登录</view>
					</view>
				</view>
				<view class="setting" @click="toUserInfo">
					<image src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/sz.png"></image>
				</view>
			</view>
			<!-- 用户端 -->
			<view class="integralbox flex jcsb">
				<view class="i-1" @click="see(1)">
					<text class="fs-38">{{ userInfo.totalScore || 0 }}</text>
					<text class="fs-26 mar-top-10">积分</text>
				</view>
				<view class="i-1" @click="see(2)">
					<text class="fs-38">0</text>
					<text class="fs-26 mar-top-10">优惠券</text>
				</view>
			</view>
			<!-- 招聘端 -->
			<!-- <view class="integralbox flex jcsb">
				<view class="i-1 w-25" @click="lookClick(1)">
					<text class="fs-38">1501</text>
					<text class="fs-26 mar-top-10">谁看过</text>
				</view>
				<view class="i-1 w-25" @click="lookClick(2)">
					<text class="fs-38">11</text>
					<text class="fs-26 mar-top-10">沟通过</text>
				</view>
				<view class="i-1 w-25" @click="lookClick(3)">
					<text class="fs-38">11</text>
					<text class="fs-26 mar-top-10">面试</text>
				</view>
				<view class="i-1 w-25" @click="lookClick(4)">
					<text class="fs-38">11</text>
					<text class="fs-26 mar-top-10">收藏</text>
				</view>
			</view> -->
			<view class="vip-member flex jcsb">
				<text class="dis-i-block fs-32 fc-e4b">至尊VIP会员</text>
				<view class="dis-i-block fs-24 see" @click="see(3)">
					查看
					<image
						src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/jiantou1.png"
					></image>
				</view>
			</view>
		</view>
		<view class="orders">
			<!-- v-if="userInfo.memberRole==undefined || userInfo.memberRole==0" -->
			<view class="box">
				<view
					class="label"
					v-for="(row, index) in orderTypeLise"
					:key="row.name"
					hover-class="hover"
					@tap="toOrderType(row.Current, index)"
				>
					<view class="icon"><img :src="row.img" /></view>
					<view class="text-tc mar-top-10">{{ row.name }}</view>
				</view>
			</view>
			<!-- 招聘端显示 v-else-->
			<!-- <view class="box flex jcsb">
				<view class="label flex-1">3个在线职位</view>
				<image src="https://web.suqzp.com/public/jiantou2.png"  class="backicon" ></image>
			</view> -->
		</view>
		<!-- 招聘端显示 -->
		<view class="recruit-box" v-if="userRole == 2">
			<view class="b-line  flex jcc">
				<view
					class="labels"
					v-for="(row, index) in orderTypeLise2.slice(0, 3)"
					:key="row.name"
					hover-class="hover"
					@tap="toOrderType2(index)"
				>
					<view class="icon"><img :src="row.img" /></view>
					{{ row.name }}
				</view>
			</view>
			<view class="flex jcc">
				<view
					class="labels"
					v-for="(row, index) in orderTypeLise2.slice(3, 5)"
					:key="row.name"
					hover-class="hover"
					@tap="toOrderType2(index)"
				>
					<view class="icon"><img :src="row.img" /></view>
					{{ row.name }}
				</view>
			</view>
		</view>
		<!--用户端 v-if="userInfo.memberRole==undefined || userInfo.memberRole==0" -->
		<view class="commonly" v-if="userRole == 1">
			<view class="fs-32 fc-32 pad-top-30">常用功能</view>
			<view class="flex">
				<view class="com-list" v-for="(item, index) in severList" :key="index" @click="toClickused(index)">
					<view class="gnicon"><image :src="item.icon"></image></view>
					<text>{{ item.name }}</text>
				</view>
			</view>
		</view>

		<!-- 招聘端 -->
		<view class="commonly" v-if="userRole == 2">
			<view class="fs-32 fc-32 pad-top-30">常用功能</view>
			<view class="flex mar-top-30">
				<view class="com-list" v-for="(item, index) in severList2" :key="index" @click="toClickused2(index)">
					<view class="funitem"><image :src="item.icon"></image></view>
					<text>{{ item.name }}</text>
				</view>
			</view>
		</view>
		<view class="height-80" style="border-top: 24rpx solid #F5F5F5;"></view>
	</view>
</template>
<script>
import { mapState, mapMutations, mapGetters } from 'vuex'
export default {
	props: ['user2'],
	computed: {
		...mapState(['userInfo', 'userRole']),
		...mapGetters(['hasLogin', 'isZP'])
	},
	data() {
		return {
			imgSrcUrl: this.$mConfig.imgSrcUrl,
			/* 用户端 */
			orderTypeLise: [
				//name-标题 icon-图标 badge-角标
				{
					name: '酒店订单',
					Current: 6,
					img: this.$mConfig.imgSrcUrl + 'icon/1.png',
					url: this.$mRoutesConfig.userHotel
				},
				{
					name: '待付款',
					Current: 0,
					img: this.$mConfig.imgSrcUrl + 'icon/2.png',
					url: this.$mRoutesConfig.userHotel
				},
				{
					name: '待入住',
					Current: 1,
					img: this.$mConfig.imgSrcUrl + 'icon/3.png',
					url: this.$mRoutesConfig.userHotel
				},
				{
					name: '已完成',
					Current: 2,
					img: this.$mConfig.imgSrcUrl + 'icon/4.png',
					url: this.$mRoutesConfig.userHotel
				}
			],
			/* 招聘端 */
			orderTypeLise2: [
				//name-标题 icon-图标 badge-角标
				{ name: '置顶职位', img: this.$mConfig.imgSrcUrl + 'icon/zp1.png', url: null },
				{ name: '畅聊卡', img: this.$mConfig.imgSrcUrl + 'icon/zp2.png', url: null },
				{ name: '搜索牛人卡', img: this.$mConfig.imgSrcUrl + 'icon/zp3.png', url: null },
				{ name: '待定', img: this.$mConfig.imgSrcUrl + 'icon/4.png', url: null },
				{ name: '急聘卡', img: this.$mConfig.imgSrcUrl + 'icon/4.png', url: null }
			],
			/* 用户端求职 */
			severList: [
				{ name: '会员中心', icon: this.$mConfig.imgSrcUrl + 'icon/cy1.png', url: this.$mRoutesConfig.vipCore },
				{ name: '简历', icon: this.$mConfig.imgSrcUrl + 'icon/cy2.png', url: this.$mRoutesConfig.resumeIndex },
				{ name: '求职管理', icon: this.$mConfig.imgSrcUrl + 'icon/cy3.png', url: this.$mRoutesConfig.jobAdmin },
				{
					name: '分销中心',
					icon: this.$mConfig.imgSrcUrl + 'icon/cy4.png',
					url: this.$mRoutesConfig.distributionCenter
				},
				{
					name: '业务员中心',
					icon: this.$mConfig.imgSrcUrl + 'icon/cy5.png',
					url: this.$mRoutesConfig.SalesmanCenterLogin
				},
				{ name: '我的举报', icon: this.$mConfig.imgSrcUrl + 'icon/cy6.png', url: this.$mRoutesConfig.myReport },
				{ name: '我的帖子', icon: this.$mConfig.imgSrcUrl + 'icon/cy7.png', url: this.$mRoutesConfig.myPosts },
				{
					name: '我的评论',
					icon: this.$mConfig.imgSrcUrl + 'icon/cy8.png',
					url: this.$mRoutesConfig.myComments
				},
				{ name: '收藏', icon: this.$mConfig.imgSrcUrl + 'icon/cy9.png', url: this.$mRoutesConfig.collect },
				{
					name: '人才认证',
					icon: this.$mConfig.imgSrcUrl + 'icon/cy10.png',
					url: this.$mRoutesConfig.talentAuth
				},
				{ name: '切换招聘端', icon: this.$mConfig.imgSrcUrl + 'icon/cy11.png', url: 'zhaopin' },
				{
					name: '我要合作',
					icon: this.$mConfig.imgSrcUrl + 'icon/cy12.png',
					url: this.$mRoutesConfig.myCooperation
				},
				{
					name: '酒店入驻',
					icon: this.$mConfig.imgSrcUrl + 'icon/cy13.png',
					url: this.$mRoutesConfig.HotelAuth
				},
				{
					name: '商学院',
					icon: this.$mConfig.imgSrcUrl + 'icon/cy14.png',
					url: this.$mRoutesConfig.BusinesSchool
				},
				{
					name: '商学院认证',
					icon: this.$mConfig.imgSrcUrl + 'icon/cy14.png',
					url: this.$mRoutesConfig.BusinesSchoolAuthent
				},
				{ name: '签到', icon: this.$mConfig.imgSrcUrl + 'icon/cy15.png', url: null },
				{ name: '抽奖', icon: this.$mConfig.imgSrcUrl + 'icon/cy16.png', url: null }
			],
			/* 招聘端 */
			severList2: [
				{ name: '招聘数据', show: true, icon: this.$mConfig.imgSrcUrl + 'icon/zp6.png', url: null },
				{
					name: '我要招聘',
					show: true,
					icon: this.$mConfig.imgSrcUrl + 'icon/zp6.png',
					url: this.$mRoutesConfig.recreit
				},
				{
					name: '职位管理',
					show: true,
					icon: this.$mConfig.imgSrcUrl + 'icon/zp6.png',
					url: this.$mRoutesConfig.positions
				},
				{
					name: '道具',
					show: true,
					icon: this.$mConfig.imgSrcUrl + 'icon/zp7.png',
					url: this.$mRoutesConfig.toolProps
				},
				{
					name: '企业主页',
					show: true,
					icon: this.$mConfig.imgSrcUrl + 'icon/zp8.png',
					url: this.$mRoutesConfig.addenterinfo
				},
				{ name: '我的客服', show: true, icon: this.$mConfig.imgSrcUrl + 'icon/zp9.png', url: null },
				{ name: '设置', show: true, icon: this.$mConfig.imgSrcUrl + 'icon/zp10.png', url: null },
				{ name: '切换求职者', show: true, icon: this.$mConfig.imgSrcUrl + 'icon/zp11.png', url: 'qiuzhi' }
			]
		}
	},
	created() {
		this.getJobStaus()
	},

	methods: {
		//获取招聘信息审核状态
		async getJobStaus() {
			let param = {
				enterpriseApplyWxUserId: uni.getStorageSync('wxuser_id')
			}
			let data = await this.$apis.getRrecruitList(param)
			console.log(data, 88)
			if (data.rows.length > 0) {
				uni.setStorageSync('isZP', data.rows[0].auditStatus) //存储审核状态
				uni.setStorageSync('enterpriseId', data.rows[0].enterpriseId) //存储审核状态
			} else {
				uni.setStorageSync('isZP', 0) //存储审核状态
			}
		},
		/* 设置点击 */
		toUserInfo() {
			if (this.hasLogin) {
				this.$mRouter.push({
					route: this.$mRoutesConfig.system
				})
			} else {
				this.$mRouter.push({
					route: this.$mRoutesConfig.login,
					query: {}
				})
			}
		},
		//会员
		see(type) {
			if (this.hasLogin) {
				if (type == 1) {
					//积分
					this.$mRouter.push({
						route: this.$mRoutesConfig.score,
						query: { totalScore: this.userInfo.totalScore || 0 }
					})
				} else if (type == 2) {
					//优惠券
					this.$mRouter.push({
						route: this.$mRoutesConfig.coupon,
						query: {}
					})
				} else if (type == 3) {
					//会员
					this.$mRouter.push({
						route: this.$mRoutesConfig.vipCore
					})
				}
			} else {
				this.$mRouter.push({
					route: this.$mRoutesConfig.login,
					query: {}
				})
			}
		},
		//用户点击订单类型
		toOrderType(Current, index) {
			if (this.hasLogin) {
				this.$mRouter.push({
					route: this.orderTypeLise[index].url,
					query: {
						status: Current
					}
				})
			} else {
				this.$mRouter.push({
					route: this.$mRoutesConfig.login,
					query: {}
				})
			}
		},
		//用户端常用功能点击跳转
		async toClickused(index) {
			var that = this
			if (this.hasLogin) {
				if (this.severList[index].url == 'zhaopin') {
					this.$mRouter.push({
						route: this.$mRoutesConfig.toggle,
						query: { userStatus: this.userRole }
					})
					return
				}
				this.$mRouter.push({
					route: this.severList[index].url,
					query: {
						id: 1
					}
				})
			} else {
				this.$mRouter.push({
					route: this.$mRoutesConfig.login,
					query: {}
				})
			}
		},
		//招聘端常用功能点击跳转
		lookClick(type) {
			if (type == 1) {
				this.$mRouter.push({
					route: this.$mRoutesConfig.see,
					query: {}
				})
			} else if (type == 2) {
				this.$mRouter.push({
					route: this.$mRoutesConfig.communi,
					query: {}
				})
			} else if (type == 3) {
				uni.navigateTo({
					url: '/pages/user/company/jobslist'
				})
			}
		},
		toClickused2(index) {
			var that = this
			if (this.hasLogin) {
				if (this.severList2[index].url == 'qiuzhi') {
					this.$mRouter.push({
						route: this.$mRoutesConfig.toggle,
						query: { userStatus: this.userRole }
					})
					return
				}
				if (
					this.severList2[index].url == this.$mRoutesConfig.addenterinfo ||
					this.severList2[index].url == this.$mRoutesConfig.positions
				) {
					var JobStaus = uni.getStorageSync('isZP') //我要招聘的审核状态
					console.log(JobStaus, 77)
					if (JobStaus == 1) {
						this.$mRouter.push({
							route: this.severList2[index].url,
							query: {
								id: 1
							}
						})
					} else if (JobStaus == 2) {
						uni.showModal({
							title: '提示',
							content: '招聘信息审核失败，请重新提交',
							success: function(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/user/company/recreit'
									})
								} else if (res.cancel) {
									console.log('用户点击取消')
								}
							}
						})
					} else if (JobStaus == '') {
						uni.showModal({
							title: '提示',
							content: '请先填写招聘信息',
							success: function(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/user/company/recreit'
									})
								} else if (res.cancel) {
									console.log('用户点击取消')
								}
							}
						})
					} else {
						uni.showToast({
							title: '招聘信息正在审核中',
							icon: 'none',
							duration: 2000
						})
					}
				} else {
					this.$mRouter.push({
						route: this.severList2[index].url,
						query: {
							id: 1
						}
					})
				}
			} else {
				this.$mRouter.push({
					route: this.$mRoutesConfig.login,
					query: {}
				})
			}
		},
		//切换角色

		async switchRole(role) {
			// let res = await this.$apis.switchRole({role:role});
			// this.getUserInfo();
			// console.log("res======",res);
			// if(res.result){
			// 	// 存在，直接切换
			// 	console.log("存在，直接切换")
			// }else{
			// 	//不存在，跳转编辑
			// 	console.log("不存在，跳转编辑")
			// 	if(role==0){
			// 		//跳转到简历编辑页面。
			// 		this.$mRouter.push({
			// 			route: this.$mRoutesConfig.personReume,
			// 			query: {
			// 				id: 1
			// 			}
			// 		});
			// 	}else{
			// 		this.$mRouter.push({
			// 			route: this.$mRoutesConfig.enter
			// 		});
			// 	}
			// }
		},
		toLogin() {
			if (this.hasLogin) {
				this.$mRouter.push({
					route: this.$mRoutesConfig.personReume,
					query: {
						id: 1
					}
				})
			} else {
				this.$mRouter.push({
					route: this.$mRoutesConfig.login,
					query: {
						id: 1
					}
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.top1 {
	background: #84c0f4;
	position: fixed;
	height: 176upx;
	width: 100%;
	z-index: 10000;
	display: flex;
	.top2 {
		padding-top: 88upx;
		width: 100%;
		font-weight: 400;
		color: #ffffff;
		font-size: 34upx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		text-align: center;
	}
}
page {
	background-color: #fff;
}
.header {
	background: #8ec7f9;
	width: 92%;
	height: 354rpx;
	padding: 0 4%;
	.h-top {
		&.status {
			padding-top: var(--status-bar-height);
		}
		height: 180rpx;
		align-items: center;
		.userinfo {
			width: 90%;
			display: flex;
			.face {
				flex-shrink: 0;
				width: 120rpx;
				height: 120rpx;
				border: 1px solid #fff;
				border-radius: 50%;
				image {
					width: 100%;
					height: 100%;
					border-radius: 100%;
				}
			}
			.info {
				width: 92%;
				padding: 0 4%;
				display: flex;
				flex-flow: wrap;
				padding-left: 30upx;
				.username {
					width: 100%;
					color: #fff;
					font-size: 40upx;
					.vip-img {
						width: 64rpx;
						height: 32rpx;
						display: inline-block;
						position: relative;
						top: 4rpx;
					}
					.rz-img {
						width: 36rpx;
						height: 36rpx;
						display: inline-block;
						position: relative;
						top: 4rpx;
					}
				}
				.integral {
					display: flex;
					align-items: center;
					height: 40upx;
					color: #fff;
					border-radius: 20upx;
					font-size: 24upx;
				}
			}
		}
		.setting {
			flex-shrink: 0;
			width: 6vw;
			height: 6vw;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	.integralbox {
		.i-1 {
			color: #fff;
			width: 50%;
			text-align: center;
			text {
				display: block;
			}
		}
		.w-25 {
			width: 25%;
		}
	}
	.vip-member {
		height: 80rpx;
		background: #2e2e2e;
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
		margin-top: 18rpx;
		padding: 0 32rpx;
		.fc-e4b {
			color: #e4bfa2;
			line-height: 80rpx;
		}
		.see {
			margin-top: 20rpx;
			width: 110rpx;
			height: 40rpx;
			background: #e4bfa2;
			border-radius: 30rpx;
			line-height: 40rpx;
			text-align: center;
			image {
				width: 20rpx;
				height: 20rpx;
				display: inline-block;
			}
		}
	}
}
.hover {
	background-color: #eee;
}
.orders {
	width: 100%;
	display: flex;
	align-items: flex-start;
	margin-top: -1upx;
	border-bottom: 12rpx solid #f5f5f5;
	.box {
		width: 92%;
		padding: 0 4%;
		background-color: #fefefe;
		border-radius: 24upx;
		margin-bottom: 40upx;
		display: flex;
		align-items: center;
		justify-content: center;
		.label {
			margin-top: 38rpx;
			align-items: center;
			justify-content: center;
			flex-flow: wrap;
			width: 100%;
			color: #666666;
			font-size: 26upx;
			.icon {
				position: relative;
				width: 60rpx;
				height: 60rpx;
				margin: 0 auto;
				.badge {
					position: absolute;
					width: 4vw;
					height: 4vw;
					background-color: #ec6d2c;
					top: -1vw;
					right: -1vw;
					border-radius: 100%;
					font-size: 20upx;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					z-index: 10;
				}
				image {
					width: 60rpx;
					height: 60rpx;
					z-index: 9;
				}
			}

			.label-icon {
				font-size: 48upx;
				color: $main-color;
			}
		}
	}
}
.list {
	width: 100%;
	border-bottom: solid 26upx #f1f1f1;
	.li {
		width: 92%;
		height: 100upx;
		padding: 0 4%;
		border-bottom: solid 1upx #e7e7e7;
		display: flex;
		align-items: center;
		&.noborder {
			border-bottom: 0;
		}
		.icon {
			flex-shrink: 0;
			width: 50upx;
			height: 50upx;
			image {
				width: 50upx;
				height: 50upx;
			}
		}
		.text {
			padding-left: 30upx;
			width: 100%;
			color: #666;
		}
		.to {
			flex-shrink: 0;
			width: 40upx;
			height: 40upx;
		}
		.icon-next {
			font-size: $font-size-34;
			color: $font-color-999;
		}
	}
}
.commonly {
	width: 88%;
	margin: 0 auto 40rpx;
	.fc-32 {
		color: #323233;
	}
	.com-list {
		width: 25%;
		text-align: center;
		margin: 10rpx 0 38rpx 0;
		.gnicon {
			width: 60rpx;
			height: 60rpx;
			display: block;
			margin: 0 auto;
			image {
				width: 60rpx;
				height: 60rpx;
				display: block;
			}
		}
		.funitem {
			width: 60rpx;
			height: 60rpx;
			display: block;
			margin: 0 auto;
			image {
				width: 44rpx;
				height: 46rpx;
			}
		}
	}
	.com-list:nth-child(1) {
		.funitem {
			image {
				width: 44rpx;
				height: 44rpx;
			}
		}
	}
	.com-list:nth-child(2) {
		.funitem {
			image {
				width: 56rpx;
				height: 56rpx;
			}
		}
	}
	.com-list:nth-child(3),
	.com-list:nth-child(5) {
		.funitem {
			image {
				width: 60rpx;
				height: 60rpx;
			}
		}
	}
	.com-list:nth-child(4) {
		.funitem {
			image {
				width: 48rpx;
				height: 52rpx;
			}
		}
	}
}
.backicon {
	width: 16rpx;
	height: 30rpx;
	display: inline-block;
	position: relative;
	top: 36rpx;
}
.recruit-box {
	border-bottom: 12rpx solid #f5f5f5;
	.labels {
		width: 33%;
		line-height: 106rpx;
		text-align: center;
	}
	.icon {
		margin-right: 10rpx;
		width: 35rpx;
		height: 36rpx;
		display: inline-block;
		position: relative;
		top: 10rpx;
		image {
			width: 35rpx;
			height: 36rpx;
		}
	}
}
</style>
